<template>
    <div id="mine">
      
        <van-dropdown-menu active-color="#1989fa">
          
            <van-dropdown-item title="距离/区域" ref="item">
              <div>
              <div>
                <p class="p1">距离我</p>
                <div class="listCss" v-for="(item,index) in listArr" :key="index"
                :class="{'activeCss':activeVar==index}" @click="activeFun(item,index)">
                  {{item}}
                </div>
                </div>
                <!-- <van-tag v-if="show" closeable size="medium" type="primary" @close="close">标签</van-tag> -->
                <br><br><br><br>
                <div>
                  <p class="p1-1">行政区</p>
                  <van-checkbox-group v-model="result" class="p1-2">
                    <van-checkbox name="0" shape="square">二七区</van-checkbox><br>
                    <van-checkbox name="1" shape="square">上街区</van-checkbox><br>
                    <van-checkbox name="2" shape="square">新密市</van-checkbox><br>
                    <van-checkbox name="3" shape="square">管城回族区</van-checkbox><br>
                    <van-checkbox name="4" shape="square">惠济区</van-checkbox><br>
                    <van-checkbox name="5" shape="square">金水区</van-checkbox><br>
                    <van-checkbox name="6" shape="square">登封市</van-checkbox><br>
                    <van-checkbox name="7" shape="square">中原区</van-checkbox><br>
                    <van-checkbox name="8" shape="square">巩义市</van-checkbox><br>
                    <van-checkbox name="9" shape="square">荥阳市</van-checkbox><br>
                    <van-checkbox name="10" shape="square">航空港经济综合实验区</van-checkbox><br>
                    <van-checkbox name="11" shape="square">中牟县</van-checkbox><br>
                    <van-checkbox name="12" shape="square">新郑市</van-checkbox><br>
                    <van-checkbox name="13" shape="square">郑州高新技术产业开发区</van-checkbox><br>
                    <van-checkbox name="14" shape="square">郑东新区</van-checkbox><br>
                  </van-checkbox-group>
                </div>
                <div class="p1-3">
                <van-button type="info" size="large" block>确定</van-button>
              </div>
              </div>
            </van-dropdown-item>
            <van-dropdown-item v-model="value2" :options="option2" />
            <van-dropdown-item v-model="value3" :options="option3" />
            <van-dropdown-item title="偏好" ref="item">
              <van-notice-bar
            class="top"
            left-icon="volume-o"
            text="已经选择的偏好: 附近的1km,收藏的电站优先(3km内)"/>
            <div class="jlw">
            <span>距离我</span>
    </div>
        <div class="container">
            <div class="f1">
              <ul class="ul1">
              <li>1km</li>
              <li>2km</li>
              <li>3km</li>
              <li>5km</li>
              <li>10km</li>
              <li>20km</li>
              <li>30km</li>
              <li>50km</li>
              <li>100km</li>
              <li>200km</li>
            </ul>
            
            </div>
            <span>绑定车型,更精准地帮你找到合适的电站</span>
            <div class="f2">
              <span>
              <img src="/img/xjc.png" alt="">
              <a href="#">添加爱车,查看车型适配情况</a>>
              </span>
            </div>
            <div class="f3">
              <van-checkbox-group v-model="result" direction="horizontal">
              <van-checkbox v-model="checked" disabled>我的车型优先</van-checkbox>
                <van-checkbox v-model="checked" checked-color="blue">我收藏的电站优先(3km内)</van-checkbox>
              </van-checkbox-group>
            </div>
            <div class="f4">
              <span>电站星级</span>
              <ul class="ul2">
                <li>三星</li>
                <li>四星</li>
                <li>五星</li>
              </ul>
            </div>
            <div class="f5">
              <span>权益</span>
              <ul class="ul3">
                <li>特来电权益</li>
                <li>即插即充</li>
              </ul>
            </div>
            <div class="f6">
              <span>电站服务</span>
              <ul class="ul4">
                <li>充电专用车位</li>
                <li>专人值守</li>
                <li>专人道闸</li>
                <li>洗手间</li>
                <li>休息室</li>
                <li>便利店</li>
                <li>简餐</li>
                <li>洗车服务</li>
                <li>室内</li>
                <li>雨棚</li>
                <li>场站照明</li>
              </ul>
            </div>
            <div class="f7">
              <span>电站类型</span>
              <ul class="ul5">
                <li>对外开放</li>
                <li>不对外开放</li>
              </ul>
            </div>
            <div class="f8">
              <span>充电方式</span>
              <ul class="ul6">
                <li>直流快充</li>
                <li>直流慢充</li>
                <li>超级快充</li>
                <li>交流快充</li>
                <li>交流慢充</li>
              </ul>
            </div>
            <div class="f9">
              <span>电站状态</span>
              <ul class="ul7">
                <li>空闲</li>
              </ul>
            </div>
            <div class="f10">
              <span>运营类型</span>
              <ul class="ul8">
                <li>自营</li>
                <li>非自营</li>
                <li>互联网</li>
              </ul>
            </div>
            <div class="f11">
              <span>停车费</span>
              <ul class="ul9">
                <li>免费·现时免费</li>
                <li>收藏</li>
              </ul>
            </div>
            <div class="f12">
              <span>停车场</span>
              <ul class="ul10">
                <li>露天</li>
                <li>非露天</li>
                <li>地上</li>
                <li>地下</li>
              </ul>
            </div>
            <div class="f13">
              <span>智能地锁</span>
              <ul class="ul11">
                <li>有地锁</li>
                <li>车位空闲(仅支持能感应车辆的车位)</li>
              </ul>
            </div>
            <div class="f14">
              <span>预约充电</span>
              <ul class="ul12">
                <li>可预约</li>
              </ul>
            </div>
            <div class="f15">
              <span>先充后付</span>
              <ul class="ul13">
                <li>芝麻信用·免充值</li>
                <li>微信支付分·免充值</li>
              </ul>
            </div>
            <div class="f16">
              <span>高速模式</span>
              <ul class="ul14">
                <li>高速路充电桩</li>
                <li>靠近高速路的充电桩</li>
              </ul>
            </div>
            <div class="f17">
              <span>营业时间</span>
              <ul class="ul15">
                <li>营业中</li>
                <li>24小时</li>
                <li>时间不确定</li>
              </ul>
            </div>
            <div class="f18">
              <span>充电接口</span>
              <ul class="ul16">
                <li>国际2011</li>
                <li>国际2015</li>
              </ul>
            </div>
            <div class="f19">
              <span>辅源类型(仅适用于直流快充)</span>
              <ul class="ul17">
                <li>12V</li>
                <li>24V</li>
              </ul>
            </div>
            <div class="f20">
              <span>电压(仅适用于直流快充)</span>
              <ul class="ul18">
                <li>200V-500V</li>
                <li>700V及以上</li>
              </ul>
            </div>
            <div class="f21">
              <span>查看最低功率15kW-360kW的充电站(适用于直流快充)</span>
              <div class="zj">
                <van-slider class="ht"  v-model="value" range @change="onChange" />
              </div>
            </div>
                <button>保存</button>
        </div>
              </van-dropdown-item>
        </van-dropdown-menu>
        <div class="zhong1">
            <van-tag round type="primary" class="zhong">可赔付</van-tag>
            <van-tag round type="primary" class="zhong">特来电权益</van-tag>
            <van-tag round type="primary" class="zhong">对外开放</van-tag>
            <van-tag round type="primary" class="zhong">免费停车</van-tag>
            <van-tag round type="primary" class="zhong">星级电站</van-tag>
            <van-tag round type="primary" class="zhong">终端空闲</van-tag>
          </div>
          <div  v-if="data">
                  <div  v-for="i in data"   :key="i.cd_id"  @click="$router.push(`/detail?cd_id=${i.cd_id}`)">
                    <img :src="`${i.cd_src}`" alt="" class="pro-img-1">
                    <div>
                      <p><b>{{i.cd_name}}</b> </p>
                      <div class="pro-2">
                      <img src="../assets/zhaodianzhuang.jpg" alt="" class="pro-img-2">
                      {{i.cd_km}}
                    </div>
                    </div>
                    <div class="pro-3">
                      4.9分  最近充电  4小时前  特来电权益  对外开放 限时免费停车 可赔付
                    </div>
                    <div class="pro-4">
                      <b>{{i.cd_price}}</b>元/度
                      <div class="pro-5">
                      <div class="p5-C">/10</div>
                      <div class="p5-B">闲9</div>
                      <div class="p5-A">快</div>
                    </div>
                    </div>
                   <hr class="pro-hr"> 
                  </div> 
                  
                 </div>
                 
        </div>
</template>


<script>
</script>
<script>

export default {
  mounted () {
    let url='/chongdian/select'
    this.axios.get(url).then(res=>{
      console.log(res);
      this.data=res.data.result
    })
  },

  data() {
    return {
      data:'',
      value:'',
      onChange:'',
      checked:'',
      activeVar:0,
      //默认值为0，点击时将索引赋值给active，从而实现点击选中效果
      listArr:["1km","2km","3km","4km","5km","10km","30km","50km","100km","200km"],
      radio:'1',
      value2: 'a',
      value3:'n',
      value4:'a1',
      option2: [
        { text: '综合排序', value: 'a' },
        { text: '离我最近', value: 'b' },
        { text: '评价最好', value: 'c' },
        { text: '价格最低', value: 'd' },
        { text: '价格最高', value: 'e' },
      ],
      option3: [
        { text: '充电站', value: 'n' },
        { text: '个人桩', value: 'm' },
      ],
      option4: [
        { text: '偏好', value: 'a1' },
        { text: '好评排序', value: 'b2' },
        { text: '销量排序', value: 'c3' },
      ],
      result:[]
    };
    
  },
  methods: {
    activeFun(item,index){
      this.activeVar=index
    }
  },

};

</script>

<style lang="scss" scoped>
.zhong1{
  margin-left: 5px;
}
.zhong{
  margin-left: 6px;
  padding: 3px;
}
.p1{
    color: gray;
    font-size: 15px;
    height: 5px;
    margin-top: 2px;
    margin-left: 10px;
}
.p1-1{
    color: gray;
    font-size: 15px;
    height: 5px;
    margin-left: 10px;
    padding-bottom: 5px;
}
.p1-2{
  margin-left: 10px;
}
.p1-3{
  margin: 10px;
}
.p2{
  color: red;
    font-size: 15px;
    height: 5px;
    margin-top: 2px;
}
.p1-juli{
  margin-top: 7px;
  overflow: hidden;
  float: left;
  width: 50px;
  margin-left: 10px;
  padding: 0 5px;
}
.p1-quyu{
  // float: left;
  overflow: hidden;
  width: 50px;
  margin-left: 10px;
  text-align: center;
  padding: 0 5px;
} 
.p3{
  overflow: hidden;
  width: 60px;
  margin-left: 10px;
  text-align: center;
  padding: 0 5px;
}
.p5{
  overflow: hidden;
  width: 60px;
  margin-left: 10px;
  text-align: center;
  padding: 0 5px;
}

.listCss{
  cursor: pointer;
  width: 50px;
  height: 23PX;
  text-align: center;
  border: 1px solid #ccc;
  float: left;
  margin-top: 6px;
  margin-left: 10px;
  margin-bottom: 5px;
  padding-top: 3px;
}
.activeCss{
  background: rgb(226, 238, 250);
  color: #1989fa;
  border: 1px solid #1989fa;
}
.pro-img-1{
  width: 100px;
  height: 100px;
  float: left;
  padding: 0 10px;
}
.pro-2{
  float: right;
  margin-top: -35px;
  font-size: 14px;
  color: #ccc;
}
.pro-img-2{
  widows: 10px;
  height: 10px;
  
}
.pro-3{
  color: #ccc;
  font-size: 3px;
  margin-top: -15px;
}
.pro-4{
  margin-top: 10px;
  color: rgb(135, 133, 133);
}
.pro-4>b{
  color: red;
}
.pro-5{
  // float: right;
  font-size: 10px;
  margin-top: -20px;
  margin-right: 3px;
}
.p5-A{
  background-color: red;
  color: white;
  border-radius: 5px;
  padding: 1px 3px;
  float: right;
  margin-right: 2px;
}
.p5-B{
  color: red;
  float: right;
}
.p5-C{
  float: right;
  display: flex;
  margin-top: 2px;
}
.pro-hr{
  margin-top: 40px;
}

.container {
  background-color: white;
  width: 98%;
  .f1{
    padding: 10px 0px;
    .ul1{
      width: 85%;
      // background-color: aquamarine;
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      
      li {
        border: 1px solid grey;
        border-radius: 6px;
        display: inline-block;   
        padding: 5px 10px; 
        margin-top: 5px;    
        margin-left: 10px;
      }
    }
  }
  span {
    display: block;
    width: 96%;
    // background-color: honeydew;
    color: gray;
    font-family: '楷体';
    margin: 10px 10px;
  }
  .f2 {
    border: 1px solid gray;
    border-radius: 10px;
    span {
      height: 60px;
      display: block;
      img {
      margin: 0px 10px;
      width: 80px;
      height: 60px;
      float: left;
      }
      a {
        line-height: 60px;
      }
    }
  }
  .f3 {
    height: 10px;
    padding: 20px;
  }
  .f4 {
    .ul2 {
      width: 80%;
      display: flex;
      padding-bottom: 10px;
      li {
        width: 60px;
        height: 25px;
        border-radius: 6px;
        text-align: center;
        line-height: 25px;
        border: 1px solid gray;
        margin-left: 10px;
      }
    }
  }
  .f5 {
    .ul3 {
      width: 90%;
      display: flex;
      padding-bottom: 10px;
      li {
        width: 90px;
        height: 25px;
        border-radius: 6px;
        text-align: center;
        line-height: 25px;
        border: 1px solid gray;
        margin-left: 10px;
      }
    }
  }
  .f6{
    padding: 10px 0px;
    .ul4{
      width: 90%;
      // background-color: aquamarine;
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      li {
        border: 1px solid grey;
        border-radius: 6px;
        display: inline-block;   
        padding: 5px 10px; 
        margin-top: 5px;  
        margin-left: 10px;  
      }
    }
  }
  .f7 {
    .ul5 {
      width: 60%;
      display: flex;
      padding-bottom: 10px;
      li {
        width: 90px;
        height: 25px;
        border-radius: 6px;
        text-align: center;
        line-height: 25px;
        border: 1px solid gray;
        margin-left: 10px;
      }
    }
  }
  .f8{
    padding: 10px 0px;
    .ul6 {
      width: 90%;
      // background-color: aquamarine;
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      li {
        border: 1px solid grey;
        border-radius: 6px;
        display: inline-block;   
        padding: 5px 10px; 
        margin-top: 5px;    
        margin-left: 10px;
      }
    }
  }
  .f9{
    padding: 10px 0px;
    .ul7 {
      width: 20%;
      // background-color: aquamarine;
      list-style: none;
      li {
        border: 1px solid grey;
        border-radius: 6px;
        display: inline-block;   
        padding: 5px 10px; 
        margin: 5px 5px;  
        margin-left: 10px;  
      }
    }
  }
  .f10 {
    .ul8 {
      width: 90%;
      display: flex;
      padding-bottom: 10px;
      li {
        padding: 5px;
        height: 25px;
        border-radius: 6px;
        text-align: center;
        line-height: 25px;
        border: 1px solid gray;
        margin-left: 10px;
      }
    }
  }
  .f11 {
    .ul9 {
      width: 100%;
      display: flex;
      padding-bottom: 10px;
      li {
        padding: 5px;
        height: 25px;
        border-radius: 6px;
        text-align: center;
        line-height: 25px;
        border: 1px solid gray;
        margin-left: 10px;
      }
    }
  }
  .f12 {
    .ul10 {
      width: 80%;
      display: flex;
      padding-bottom: 10px;
      li {
        padding: 5px;
        // width: 70px;
        height: 25px;
        border-radius: 6px;
        text-align: center;
        line-height: 25px;
        border: 1px solid gray;
        margin-left: 10px;
      }
    }
  }
  .f13 {
    .ul11 {
      width: 100%;
      display: flex;
      padding-bottom: 10px;
      li {
        padding: 5px;
        height: 25px;
        border-radius: 6px;
        text-align: center;
        line-height: 25px;
        border: 1px solid gray;
        margin-left: 10px;
      }
    }
  }
  .f14{
    padding: 10px 0px;
    .ul12 {
      width: 30%;
      // background-color: aquamarine;
      list-style: none;
      li {
        border: 1px solid grey;
        border-radius: 6px;
        display: inline-block;   
        padding: 5px 10px; 
        margin: 5px 5px;    
      }
    }
  }
  .f15 {
    .ul13 {
      width: 90%;
      display: flex;
      padding-bottom: 10px;
      li {
        padding: 5px;
        height: 25px;
        border-radius: 6px;
        text-align: center;
        line-height: 25px;
        border: 1px solid gray;
        margin-left: 10px;
      }
    }
  }
  .f16 {
    .ul14 {
      width: 90%;
      display: flex;
      padding-bottom: 10px;
      li {
        padding: 5px;
        height: 25px;
        border-radius: 6px;
        line-height: 25px;
        border: 1px solid gray;
        margin-left: 10px;
      }
    }
  }
  .f17 {
    .ul15 {
      width: 90%;
      display: flex;
      padding-bottom: 10px;
      li {
        padding: 5px;
        height: 25px;
        border-radius: 6px;
        line-height: 25px;
        border: 1px solid gray;
        margin-left: 10px;
      }
    }
  }
  .f18 {
    .ul16 {
      width: 80%;
      display: flex;
      padding-bottom: 10px;
      li {
        padding: 5px;
        height: 25px;
        border-radius: 6px;
        line-height: 25px;
        border: 1px solid gray;
        margin-left: 10px;
      }
    }
  }
  .f19 {
    .ul17 {
      width: 90%;
      display: flex;
      padding-bottom: 10px;
      li {
        padding: 5px;
        height: 25px;
        border-radius: 6px;
        line-height: 25px;
        border: 1px solid gray;
        margin-left: 10px;
      }
    }
  }
  .f20 {
    .ul18 {
      width: 80%;
      display: flex;
      padding-bottom: 10px;
      li {
        padding: 5px;
        height: 25px;
        border-radius: 6px;
        line-height: 25px;
        border: 1px solid gray;
        margin-left: 10px;
      }
    }
  }
  .f21 {
    padding-bottom: 10px;
    .zj {
      height: 40px;
      border: 1px solid gray;
      border-radius: 20px;
      width: 90%;
      .ht {
        width: 80%;
        margin: 16px;
        height: 7px;
      }
    }
  }
    button{
      width: 100%;
      height: 30px;
      border: 0px;
      background-color: #1989fa;
    }
  }
</style>